<script setup lang='ts'>
import { ref } from 'vue';
import { ElNotification } from 'element-plus'
import { useRouter } from 'vue-router';
import { regCode } from "../../../api/api";
const router = useRouter()
// 定义一个简单的正则表达式来检查邮箱格式  
let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const mail = ref('')
const password = ref('')
const verifyPassword = ref('')
const data = ref()
const sendData = async () => {
    if (!emailRegex.test(mail.value)) return open4('错误', '邮箱格式错误', 'error')
    if (password.value.length <= 5 && password.value === '') return open4('错误', '密码最少输入6位数', 'error')
    if (password.value !== verifyPassword.value) return open4('错误', '请检查检验密码是否跟上面密码相同', 'error')
    data.value = { mail, password }
    const res = await regCode(data.value)
    if(res.data.code !== '200') return open4('错误', res.data.msg, 'error')
    open4('成功', res.data.msg, 'success')
    router.push({ name: 'mailcode', query: { num: 1, mail: mail.value, password: password.value } })
}
const open4 = (title: string, message: string, type: any) => {
    ElNotification({
        title,
        message,
        type,
    })
}
</script>

<template>
    <div class="content1">
        <div class="inp">
            <div class="input">
                <div class="h4">
                    <h4>邮箱：</h4>
                </div>
                <el-input v-model="mail" placeholder="请输入邮箱" />
            </div>
            <div class="input">
                <div class="h4">
                    <h4>密码：</h4>
                </div>
                <el-input v-model="password" show-password maxlength="10" placeholder="请输入密码" />
            </div>
            <div class="input">
                <div class="h4">
                    <h4>校验密码：</h4>
                </div>
                <el-input v-model="verifyPassword" show-password placeholder="请输入再次密码（跟上面密码相同）" />
            </div>
            <div class="btn">
                <el-button style="width: 200px;" plain @click="sendData">提交</el-button>
            </div>
        </div>
    </div>
</template>

<style scoped>
.content1 {
    width: 1300px;
    margin: auto;
}

.inp {
    width: 800px;
    margin: auto;
    box-sizing: border-box;
    padding: 20px;
}

.h4 {
    width: 100px;
}

.input {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.btn {
    width: 200px;
    margin: auto;
    margin-top: 60px;
}
</style>